<template>
    <div class="master">
        <el-container class="master-container">
            <el-header class="master-container-head">
                <div class="logo-box">
                    <img src="@/assets/images/logo.png" alt=""/>
                    <span>{{ $t('系统名称') }}</span>
                    <a class="a-download" href="https://gitee.com/bearsee/sibionics-ui-next-demo">（下载demo源码）</a>
                </div>
                <div class="drop-box">
                    <!-- 用户操作切换演示 -->
                    <sib-dropdown :options="dropdownData" @change="dropdownChange">
                        <div class="drop-content-box">
                            <el-avatar icon="Avatar"></el-avatar>
                            <p class="userName">且听风吟</p>
                            <el-icon><CaretBottom></CaretBottom></el-icon>
                        </div>
                    </sib-dropdown>
                    <!-- 主题色切换 -->
                    <el-color-picker v-model="theme" :predefine="predefine" @change="changeTheme"></el-color-picker>
                    <!-- 语言切换 -->
                    <sib-dropdown :options="languages" @change="changeLang">
                        <div class="drop-content-box">
                            {{ (languages.find(({ value }) => value === currentLang) || {}).label }}
                            <el-icon><ArrowDown></ArrowDown></el-icon>
                        </div>
                    </sib-dropdown>
                </div>
            </el-header>
            <el-main class="master-container-body">
                <!-- eslint-disable-next-line -->
                <sib-menu class="side-menu" router unique-opened :default-active="defaultActiveMenu" :auto-collapse-width="1200" :menus="menus"></sib-menu>
                <el-main class="center-body">
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item v-for="(item, i) in breadcrumbs" :key="i">{{ item.name }}</el-breadcrumb-item>
                    </el-breadcrumb>
                    <el-main id="main-container" class="main-container">
                        <router-view class="main-container-page transverse-scroll vertical-scroll"></router-view>
                    </el-main>
                </el-main>
            </el-main>
        </el-container>
    </div>
</template>

<script>
import { ref, computed, inject } from 'vue';
import { useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
import { useStore } from 'vuex';
import menuConfig from '@/router/menus';
import { getLocales, changeLang } from '@/locale';

export default {
    name: 'MasterPage',
    setup() {
        const route = useRoute();
        const store = useStore();
        const changeThemeColor = inject('$changeThemeColor');
        const resetThemeColor = inject('$resetThemeColor');
        const theme = ref(window.localStorage.getItem('current_theme_color') || '#00c4a3');
        const currentLang = computed(() => store.state.language);
        const locale = computed(() => getLocales(currentLang.value));
        const menus = menuConfig;
        const breadcrumbs = computed(() => {
            const firstMenu = menus.find(({ path }) => route.path && path === route.path);
            const secondMenu = menus.find((item) => (item.children || []).find(({ path }) => path === route.path));
            const thirdMenu = ((secondMenu || {}).children || []).find(({ path }) => path === route.path);
            return [firstMenu, secondMenu, thirdMenu].filter((d) => d);
        });

        return {
            menus,
            defaultActiveMenu: computed(() => route.path),
            breadcrumbs,
            languages: [
                { label: '简体中文', value: 'zh-CN' },
                { label: '英文', value: 'en-US' },
            ],
            currentLang,
            locale,
            changeLang,
            theme,
            predefine: ['#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#1e90ff', '#c71585'],
            changeTheme: (color) => {
                changeThemeColor(color);
                if (!color) {
                    resetThemeColor();
                    theme.value = window.localStorage.getItem('current_theme_color') || '#00c4a3';
                }
            },
            dropdownData: [
                { label: '个人资料', value: '1' },
                { label: '修改密码', value: '2' },
                { label: '退出登录', value: '3' },
            ],
            dropdownChange(value, option) {
                ElMessage.info(`当前已选择: ${JSON.stringify(option)}`);
            },
        };
    },
};
</script>
